<template>
    <div class="department-list">
        <!-- 批量操作 -->
        <div class="action-btn">
            <Button size="small" @click="showModel" type="success">添加部门</Button>
        </div>
        <Table border height="650" ref="departmentList" row-key="department_id" :columns="list" :data="tablelist"
            :loading="dataloading">
            <template #status="{ row }">
                <i-switch :true-value="1" :false-value="0" v-model="row.status" size="large" @on-change="changeStatus(row.department_id,$event)"></i-switch>
            </template>
            <template #action="{ row,index }">
                <Button type="success" size="small" style="margin-right: 5px;float:left"
                    @click="showAdmin(row.department_id)">用户</Button>
                <Button type="warning" size="small" style="margin-right: 5px;float:left"
                    @click="showEditModal(row.department_id)">修改</Button>
                <Button type="error" size="small" @click="remove(row.department_id)">删除</Button>
            </template>
        </Table>
        <!-- 添加的弹出 -->
        <!-- 需要全屏时添加这句 :mask="false" class-name="idw100" -->
        <Drawer :closable="false" :mask-closable="false" :scrollable="true" title="添加部门" width="640"
            v-model="showModalStatus">
            <Spin size="large" fix v-if="loading"></Spin>
            <Form :label-width="80" :model="department" ref="departmentValidate" :rules="departmentValidate"
                action="javascript:void(0)">
                <FormItem label="上级部门" prop="parentid">
                    <TreeSelect clearable v-model="department.parent_id" :data="departmentSelect" v-width="200">
                    </TreeSelect>
                </FormItem>
                <FormItem label="部门名称" prop="name">
                    <Input v-model="department.name" placeholder="输入部门名称..."></Input>
                </FormItem>
                <FormItem label="部门状态">
                    <i-switch :true-value="1" :false-value="0" v-model="department.status">
                        <span slot="on">正常</span>
                        <span slot="off">禁用</span>
                    </i-switch>
                </FormItem>
                <FormItem>
                    <Button style="margin-right: 8px" @click="showModalStatus = false">取消</Button>
                    <Button type="primary" @click="createDepartment('departmentValidate')">提交</Button>
                </FormItem>
            </Form>
        </Drawer>
        <Drawer :closable="false" :mask-closable="false" :scrollable="true" title="修改部门" width="640"
            v-model="showEditStatus">
            <Spin size="large" fix v-if="loading"></Spin>
            <Form :label-width="80" :model="department" ref="departmentValidate" :rules="departmentValidate"
                action="javascript:void(0)">
                <FormItem label="上级部门" prop="parentid">
                    <TreeSelect clearable v-model="department.parent_id" :data="departmentSelect" v-width="200">
                    </TreeSelect>
                </FormItem>
                <FormItem label="部门名称" prop="name">
                    <Input v-model="department.name" placeholder="输入部门名称..."></Input>
                </FormItem>
                <FormItem label="部门状态">
                    <i-switch :true-value="1" :false-value="0" v-model="department.status">
                        <span slot="on">正常</span>
                        <span slot="off">禁用</span>
                    </i-switch>
                </FormItem>
                <FormItem>
                    <Button style="margin-right: 8px" @click="showEditStatus = false">取消</Button>
                    <Button type="primary" @click="editName('departmentValidate')">提交</Button>
                </FormItem>
            </Form>
        </Drawer>
        <!-- 用户弹出 -->
        <Drawer :closable="false" :scrollable="true" title="修改权限" width="640" v-model="showAdminStatus">
            <Spin size="large" fix v-if="loading"></Spin>
            <Table border :columns="adminTableList" ref="adminList" :data="adminlist" :loading="dataloading">
                <template #action="{ row,index }">
                    <Button type="error" size="small" @click="removeAdmin(row.id,index)">删除</Button>
                </template>
            </Table>
            <div class="drawer-footer">
                <Button style="margin-right: 8px" @click="showAdminStatus = false">关闭</Button>
            </div>
        </Drawer>
    </div>
</template>

<script>
export default {
    name: 'DepartmentList',
    data() {
        return {
            loading: true,
            dataloading: true,
            list: [
                {
                    title: 'Id',
                    key: 'department_id',
                    width: 60,
                },
                {
                    title: '名称',
                    minWidth: 300,
                    key: 'title',
                    tree: true,
                },
                {
                    title: '状态',
                    slot: 'status',
                    width: 150,
                },
                {
                    title: '操作',
                    slot: 'action',
                    width: 190,
                    align: 'left',
                }
            ],
            tablelist: [],
            department: {
                parent_id: 0,
                name: '',
                status: 1
            },
            showModalStatus: false,
            showEditStatus: false,
            showAdminStatus: false,
            departmentValidate: {
                name: [
                    { required: true, message: '部门名称必须填写', trigger: 'blur' }
                ]
            },
            department_id: 0,
            departmentSelect: [],
            adminlist: [],
            adminTableList: [
                {
                    title: '用户名',
                    key: 'name'
                },
                {
                    title: '手机号',
                    key: 'phone'
                },
                {
                    title: '操作',
                    slot: 'action',
                    width: 80,
                }
            ],
        }
    },
    created: function () {
        // 取数据
        this.getTableList();
    },
    methods: {
        getTableList() {
            this.$api.department.tree().then(res => {
                this.tablelist = res.result
            }).finally(e => {
                this.dataloading = false;
            });
            return;
        },
        // 展开添加
        showModel() {
            this.showModalStatus = !this.showModalStatus;
            this.department = {
                parent_id: 0,
                name: '',
                status: 1
            };
            this.department_id = 0;
            this.$api.department.select().then(res => {
                this.departmentSelect = res.result;
            }).finally(e => {
                this.loading = false;
            });
        },
        // 添加
        createDepartment(name) {
            this.$refs[name].validate((valid) => {
                if (valid) {
                    this.loading = true;
                    this.$api.department.create({ parent_id: this.department.parent_id, name: this.department.name, status: this.department.status }).then(res => {
                        this.department.name = '';
                        this.getTableList();
                        this.showModalStatus = !this.showModalStatus;
                    }).finally(e => {
                        this.loading = false;
                    });
                } else {
                    this.$Message.error('请检查输入的信息是否正确！');
                    this.loading = false
                }
            })
        },
        showEditModal(value) {
            this.department_id = value;
            this.showEditStatus = !this.showEditStatus;
            // 取树形菜单
            this.$api.department.detail({ detail_id: value }).then(res => {
                this.department.name = res.result.name;
                this.department.parent_id = res.result.parent_id;
                this.department.status = res.result.status;
            });
            this.$api.department.select().then(res => {
                this.departmentSelect = res.result;
            }).finally(e => {
                this.loading = false;
            });
        },
        // 修改名称
        editName(name) {
            this.$refs[name].validate((valid) => {
                if (valid) {
                    this.loading = true;
                    this.$api.department.edit({ detail_id: this.department_id,parent_id: this.department.parent_id, name: this.department.name, status: this.department.status }).then(res => {
                        this.showEditStatus = !this.showEditStatus;
                        this.getTableList();
                    }).finally(res => {
                        this.loading = false;
                    });
                } else {
                    this.$Message.error('请检查输入的信息是否正确！');
                    this.loading = false
                }
            })
        },
        // 删除
        remove(id) {
            // 弹出确认框
            this.$Modal.confirm({
                title: '警告',
                content: '<p>此操作不可恢复，三思而后行...</p>',
                onOk: () => {
                    this.$api.department.remove({ detail_id: id }).then(res => {
                        this.getTableList();
                    });
                }
            });
        },
        // 修改状态
        changeStatus(index, value) {
            this.$api.department.status({ detail_id: index, status: value }).then(res => {});
        },
        showAdmin(id) {
            this.showAdminStatus = !this.showAdminStatus;
            this.department_id = id;
            this.$api.department.adminlist({ detail_id: id }).then(res => {
                this.adminlist = res.result;
            }).finally(e => {
                this.loading = false;
                this.dataloading = false;
            });
            return;
        },
        // 删除
        removeAdmin(id,index) {
            // 弹出确认框
            this.$Modal.confirm({
                title: '警告',
                content: '<p>此操作不可恢复，三思而后行...</p>',
                onOk: () => {
                    this.$api.department.removeadmin({ admin_id: id, detail_id: this.department_id }).then(res => {
                        this.adminlist.splice(index, 1);
                    });
                }
            });
        },
    }
}
</script>
